<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div>试题录入</div>
      </div>

      <el-form
        :rules="newQuestionRuleFormRules"
        ref="newQuestionRuleForm"
        label-width="100px"
        class="demo-ruleForm"
        :model="data"
      >
        <!-- 学科 -->
        <el-form-item label="学科" prop="subjectID">
          <el-select width="400px" v-model="data.subjectID" placeholder="请选择活动区域">
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 目录 -->
        <el-form-item label="目录">
          <el-select width="400px" v-model="data.catalogID" placeholder="请选择活动区域">
            <el-option
              v-for="item in componyList"
              :key="item.id"
              :label="item.shortName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 企业 -->
        <el-form-item label="企业" prop="enterpriseID">
          <el-select width="400px" v-model="data.enterpriseID" placeholder="请选择活动区域">
            <el-option
              v-for="item in componyList"
              :key="item.id"
              :label="item.shortName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 城市 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="城市" prop="province">
              <el-select
                class="city"
                @change="citiesChanged(data.province)"
                width="400px"
                v-model="data.province"
                placeholder="请选择活动区域"
              >
                <el-option
                  v-for="(item,index) in provinces"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="city">
              <el-select class="city2" width="400px" v-model="data.city" placeholder="请选择活动区域">
                <el-option v-for="(item,index) in citys" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 方向 -->
        <el-form-item label="方向" prop="direction">
          <el-select width="400px" v-model="data.direction" placeholder="请选择活动区域">
            <el-option
              v-for="item in directorList"
              :key="item.id"
              :label="item.directoryName"
              :value="item.directoryName"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 题型 -->
        <el-form-item label="题型:" prop="questionType">
          <el-radio v-model="data.questionType" label="1">单选</el-radio>
          <el-radio v-model="data.questionType" label="2">多选</el-radio>
          <el-radio v-model="data.questionType" label="3">简答</el-radio>
        </el-form-item>
        <!-- 难度 -->
        <el-form-item label="难度:" prop="difficulty">
          <el-radio v-model="data.difficulty" label="1">简单</el-radio>
          <el-radio v-model="data.difficulty" label="2">一般</el-radio>
          <el-radio v-model="data.difficulty" label="3">困难</el-radio>
        </el-form-item>
        <!-- 题干 -->
        <el-form-item label="题干" prop="question">
          <quill-editor
            id="qullEdit"
            v-model="data.question"
            class="myQuillEditor"
            :options="editorOption"
          />
        </el-form-item>
        <!-- 选项 -->
        <el-form-item label="选项:">
          <div class="xuanxiang" v-for="(item,index) in data.options" :key="index">
            <el-radio v-model="data.options.isRight" label="true">{{data.options.code}}:</el-radio>
            <el-input v-model="data.options.title" placeholder="请输入内容"></el-input>
          </div>

          <div>
            <el-button type="danger" disabled>+增加选项与答案</el-button>
          </div>
        </el-form-item>
        <!-- 解析视频 -->
        <el-form-item label="解析视频:">
          <el-input class="vedio" v-model="data.videoURL" placeholder="请输入内容"></el-input>
        </el-form-item>
        <!-- 答案解析 -->
        <el-form-item label="答案解析:" prop="answer">
          <quill-editor
            id="qullEdit"
            v-model="data.answer"
            class="myQuillEditor"
            :options="editorOption"
          />
        </el-form-item>
        <!-- 题目备注 -->
        <el-form-item label="题目备注:">
          <el-input
            class="textArea"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="data.remarks"
          ></el-input>
        </el-form-item>
        <!-- 试题标签 -->
        <el-form-item label="试题标签:" prop="tags">
          <el-input class="vedio" v-model="data.tags" placeholder="请输入内容"></el-input>
        </el-form-item>
        <!-- 提交 -->
        <el-form-item>
          <el-button @click="submitData" size="medium" type="primary">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import instance from '@/utils/request'
// import list from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      data: {
        subjectID: null,
        catalogID: null,

        enterpriseID: null,
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        answer: '',
        options: [
          {
            code: 'A',
            title: '',
            img: '',
            isRight: false,
          },
          {
            code: 'B',
            title: '',
            img: '',
            isRight: false,
          },
          {
            code: 'C',
            title: '',
            img: '',
            isRight: false,
          },
          {
            code: 'D',
            title: '',
            img: '',
            isRight: false,
          },
        ],
        videoURL: '',
        remarks: '',
        tags: '',
      },

      editorOption: {},
      id: '',
      subjectList: [],
      componyList: [],

      provinces: provinces(),
      citys: [],

      directorList: [],

      newQuestionRuleFormRules: {
        subjectID: { required: true, message: '不能为空', trigger: 'change' },

        enterpriseID: { required: true, message: '不能为空', trigger: 'change' },
        province: { required: true, message: '不能为空', trigger: 'blur' },
        city: { required: true, message: '不能为空', trigger: 'blur' },
        direction: { required: true, message: '不能为空', trigger: 'blur' },
        questionType: { required: true, message: '不能为空', trigger: 'blur' },
        difficulty: { required: true, message: '不能为空', trigger: 'blur' },
        question: { required: true, message: '不能为空', trigger: 'blur' },
        selectAnswer: { required: true, message: '不能为空', trigger: 'blur' },
        video: { required: true, message: '不能为空', trigger: 'blur' },
        answer: { required: true, message: '不能为空', trigger: 'blur' },
        beizhu: { required: true, message: '不能为空', trigger: 'blur' },
        tags: { required: true, message: '不能为空', trigger: 'blur' },
      },
    }
  },
  created() {
    this.getdata()
    this.getCompany()
    this.getDirector()
    this.id = this.$route.query.id
    if (this.id) {
      this.getChangedata()
    }

    console.log(this.id)
  },
  methods: {
    async getdata() {
      try {
        const { data: res } = await instance({
          method: 'GET',
          url: '/subjects',
          params: {
            page: 1,
            pagesize: 50,
          },
        })
        console.log(res)
        this.subjectList = res.items
      } catch (err) {
        console.log(err)
        this.$message.error('获取学科列表失败')
      }
    },
    async getCompany() {
      try {
        const { data: res } = await instance({
          method: 'GET',
          url: '/companys',
          params: {
            page: 1,
            pagesize: 50,
          },
        })
        console.log(res)
        this.componyList = res.items
      } catch (err) {
        console.log(err)
        this.$message.error('获取学科列表失败')
      }
    },
    citiesChanged(city) {
      this.citys = citys(city)
    },
    async getDirector() {
      const { data: res } = await instance({
        method: 'GET',
        url: '/directorys',
      })
      console.log(res)
      this.directorList = res.items
    },
    async submitData() {
      this.$refs.newQuestionRuleForm.validate(async (valid) => {
        if (!valid) return
        console.log(valid)
        const { data: res } = await instance({
          method: 'POST',
          url: '/questions',
          data: this.data,
        })
        this.$router.push('list')
        console.log(res)
      })
    },
    async getChangedata() {
      const { data: res } = await instance({
        method: 'GET',
        url: `/questions/${this.id}`,
      })
      console.log(res)
      this.data = res
    },
  },
}
</script>

<style lang='less' scoped>
.el-select {
  width: 40%;
}
/deep/.ql-editor {
  height: 200px;
}
.el-input {
  width: 240px;
}
.el-radio {
  margin-right: 10px;
}
.xuanxiang {
  margin-bottom: 30px;
}
.vedio {
  width: 300px;
}
.textArea {
  width: 300px;
}
.city {
  width: 100%;
}
.city2 {
  width: 100%;
  position: relative;
  right: 70px;
}
</style>
